<script setup lang="ts">
import ECharts, { ECOption } from "./index";
const props = defineProps<{
  option?: ECOption | undefined;
  height?: string;
}>();

let batch: any;
function datazoom(e: any) {
  batch = e.batch.map((v: any) => ({ start: v.start, end: v.end }));
}

const option = computed<ECOption | undefined>(() => {
  if (!props.option) return;
  const res = { ...props.option };
  if (batch) res.dataZoom = batch;
  return res;
});
</script>

<template>
  <ECharts
    class="Recharts"
    :="$attrs"
    :autoresize="$attrs.autoresize !== false"
    :option="option"
    :style="{ height }"
    @datazoom="datazoom"
  />
</template>

<style lang="scss" scoped>
.Recharts {
  display: block;
}
</style>
